<template>
  <div class="examine">
    <!-- 头部菜单 -->
    <div class="el-header">
      <el-menu background-color="#eee" text-color="#303133" class="el-menu-demo" mode="horizontal" router>
        <el-menu-item index="/home">首页</el-menu-item>
        <el-menu-item>开店审核</el-menu-item>
      </el-menu>
    </div>
    <!-- 审核表单 -->
    <div class="auditForm">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="商铺名称">
          <el-input v-model="form.store_name"></el-input>
        </el-form-item>

        <el-form-item label="状态">
          <el-input v-model="form.state" disabled></el-input>
        </el-form-item>

        <el-form-item label="电话号码">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>

        <el-form-item label="地址">
          <el-input v-model="form.address"></el-input>
        </el-form-item>

        <el-form-item label="行业">
        <el-select v-model="form.business">
          <el-option :label="item.name" :value="item.name" v-for="item in businessData" :key="item.id"></el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="审核备注">
          <el-input type="textarea" v-model="form.remark"></el-input>
        </el-form-item>

        <!-- 按钮 -->
        <el-form-item>
          <el-button type="primary" @click="onSubmit" class="adopt" :disabled="disable">审核通过</el-button>
          <el-button type="danger" @click="notPass" :disabled="disable">审核不通过</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Examine',
  props: {
    id: {
      type: [Number, String],
      required: true
    }
  },
  data () {
    return {
      form: {},
      businessData: []
    }
  },

  components: {},

  computed: {
    disable () {
      if (this.form.state !== '待审核') {
        return true
      } else {
        return false
      }
    }
  },

  beforeMount () { },

  mounted () {
    console.log(this.id)
  },

  methods: {
    async onSubmit () {
      const id = this.id
      this.form.state = '审核通过'
      const data = await this.$http.put(`/store/${id}`, this.form)
      if (data.status === 200) {
        this.getStoreInfoById()
      }
    },
    async notPass () {
      const id = this.id
      this.form.state = '审核不通过'
      const data = await this.$http.put(`/store/${id}`, this.form)
      if (data.status === 200) {
        this.getStoreInfoById()
      }
    },
    async loadBusinesses() {
      const { data } = await this.$http.get('/businesses')
      console.log(data)
      this.businessData = data
    },
    async getStoreInfoById () {
      const id = this.id
      const data = await this.$http.get(`/store?id=${id}`)
      console.log(data)
      this.form = data.data[0]
    }
  },

  watch: {},
  created () {
    this.getStoreInfoById()
    this.loadBusinesses()
  }
}

</script>
<style lang='less' scoped>
.examine {
  width: 100%;
  .el-header {
    color: #333;
    height: 70px !important;
    padding: 0;
    width: 100%;
    .el-row {
      margin-top: 32px;
      padding-left: 20px;
    }
    .el-button {
      margin-left: 0;
    }
  }
  .el-main {
    padding-left: 40px;
    color: #333;
    text-align: center;
  }
}
.auditForm {
  margin: 50px;
}
/deep/.el-form-item__label {
  text-align: left;
}
/deep/.el-input__inner {
  width: 300px;
}
.adopt {
  margin-right: 80px;
}
.el-textarea {
  width: 400px;
  height: 100px;
  /deep/.el-textarea__inner {
    min-height: 100px !important;
    resize: none;
  }
}
</style>
